<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperClaude Commands Visual Guide</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .header h1 {
            font-size: 3em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .command-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .command-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .command-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .command-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }

        .command-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .command-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
            color: white;
            font-weight: bold;
        }

        .command-title {
            font-size: 1.5em;
            font-weight: bold;
            color: #333;
        }

        .command-description {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .command-syntax {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            margin-bottom: 15px;
            border-left: 4px solid #667eea;
        }

        .flags-section {
            margin-bottom: 20px;
        }

        .flags-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .flag-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .flag-name {
            font-family: 'Courier New', monospace;
            color: #667eea;
            font-weight: bold;
        }

        .flag-description {
            color: #666;
            font-size: 0.9em;
        }

        .examples-section {
            margin-top: 20px;
        }

        .example {
            background: #f1f3f4;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }

        .category-filter {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .filter-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            background: rgba(255,255,255,0.2);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }

        .search-box {
            text-align: center;
            margin-bottom: 30px;
        }

        .search-input {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            width: 100%;
            max-width: 400px;
            font-size: 16px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .hidden {
            display: none;
        }

        .collapsible {
            cursor: pointer;
            padding: 10px;
            background: #f8f9fa;
            border: none;
            border-radius: 5px;
            margin-top: 10px;
            width: 100%;
            text-align: left;
            font-weight: bold;
            transition: background 0.3s ease;
        }

        .collapsible:hover {
            background: #e9ecef;
        }

        .content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .content.active {
            max-height: 500px;
        }

        .persona-tag {
            display: inline-block;
            padding: 4px 8px;
            background: #e3f2fd;
            color: #1976d2;
            border-radius: 12px;
            font-size: 0.8em;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        .mcp-indicator {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #4caf50;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7em;
        }

        @media (max-width: 768px) {
            .command-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>SuperClaude Commands Visual Guide</h1>
            <p>Interactive documentation for SuperClaude command system</p>
        </div>

        <div class="search-box">
            <input type="text" class="search-input" placeholder="搜索命令..." id="searchInput">
        </div>

        <div class="category-filter">
            <button class="filter-btn active" data-category="all">全部</button>
            <button class="filter-btn" data-category="analysis">分析类</button>
            <button class="filter-btn" data-category="development">开发类</button>
            <button class="filter-btn" data-category="deployment">部署类</button>
            <button class="filter-btn" data-category="utility">工具类</button>
            <button class="filter-btn" data-category="mcp">MCP集成</button>
        </div>

        <div class="command-grid" id="commandGrid">
            <!-- Explain Command -->
            <div class="command-card" data-category="analysis development">
                <div class="mcp-indicator">MCP支持</div>
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #ff6b6b, #ffa726);">E</div>
                    <div class="command-title">/explain</div>
                </div>
                <div class="command-description">
                    深入解释技术概念、代码片段或系统架构。支持多种深度级别和解释风格。
                </div>
                <div class="command-syntax">
                    /explain [--depth beginner|intermediate|advanced|expert] [--style tutorial|reference|conversational|academic] [--visual] "内容"
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">核心参数</div>
                    <div class="flag-item">
                        <span class="flag-name">--depth</span>
                        <span class="flag-description">解释深度：beginner, intermediate, advanced, expert</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--style</span>
                        <span class="flag-description">解释风格：tutorial, reference, conversational, academic</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--visual</span>
                        <span class="flag-description">包含图表和可视化辅助</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/explain --depth beginner --style tutorial "React hooks"</div>
                    <div class="example">/explain --depth advanced --visual "B-tree indexes"</div>
                    <div class="example">/explain --depth expert --think "quicksort optimization"</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">教育角色</span>
                    <span class="persona-tag">技术专家</span>
                </div>
            </div>

            <!-- Deploy Command -->
            <div class="command-card" data-category="deployment">
                <div class="mcp-indicator">MCP支持</div>
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #4caf50, #8bc34a);">D</div>
                    <div class="command-title">/deploy</div>
                </div>
                <div class="command-description">
                    自动化部署流程，支持多种环境和配置。集成CI/CD管道和容器化部署。
                </div>
                <div class="command-syntax">
                    /deploy [--env dev|staging|prod] [--config config.yml] [--dry-run] [--rollback] [target]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">部署选项</div>
                    <div class="flag-item">
                        <span class="flag-name">--env</span>
                        <span class="flag-description">部署环境：dev, staging, production</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--config</span>
                        <span class="flag-description">部署配置文件路径</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--dry-run</span>
                        <span class="flag-description">预演模式，不实际执行</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--rollback</span>
                        <span class="flag-description">回滚到上一个版本</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/deploy --env staging --config deploy.staging.yml</div>
                    <div class="example">/deploy --env prod --dry-run</div>
                    <div class="example">/deploy --rollback --env prod</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">运维专家</span>
                    <span class="persona-tag">DevOps</span>
                </div>
            </div>

            <!-- Test Command -->
            <div class="command-card" data-category="development utility">
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #9c27b0, #e91e63);">T</div>
                    <div class="command-title">/test</div>
                </div>
                <div class="command-description">
                    运行测试套件，支持单元测试、集成测试和端到端测试。提供详细的测试报告。
                </div>
                <div class="command-syntax">
                    /test [--unit] [--integration] [--e2e] [--coverage] [--watch] [test-pattern]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">测试类型</div>
                    <div class="flag-item">
                        <span class="flag-name">--unit</span>
                        <span class="flag-description">运行单元测试</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--integration</span>
                        <span class="flag-description">运行集成测试</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--coverage</span>
                        <span class="flag-description">生成覆盖率报告</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--watch</span>
                        <span class="flag-description">监听文件变化自动测试</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/test --unit --coverage</div>
                    <div class="example">/test --integration --watch</div>
                    <div class="example">/test --e2e "**/*.spec.js"</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">测试工程师</span>
                    <span class="persona-tag">质量保证</span>
                </div>
            </div>

            <!-- Build Command -->
            <div class="command-card" data-category="development">
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #ff9800, #ff5722);">B</div>
                    <div class="command-title">/build</div>
                </div>
                <div class="command-description">
                    构建项目，支持多种构建目标和优化级别。包含打包、压缩和优化流程。
                </div>
                <div class="command-syntax">
                    /build [--target web|node|mobile] [--mode dev|prod] [--analyze] [--clean]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">构建选项</div>
                    <div class="flag-item">
                        <span class="flag-name">--target</span>
                        <span class="flag-description">构建目标：web, node, mobile</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--mode</span>
                        <span class="flag-description">构建模式：development, production</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--analyze</span>
                        <span class="flag-description">分析构建产物大小</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--clean</span>
                        <span class="flag-description">清理之前的构建产物</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/build --target web --mode prod</div>
                    <div class="example">/build --analyze --clean</div>
                    <div class="example">/build --target node --mode dev</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">构建工程师</span>
                    <span class="persona-tag">前端开发</span>
                </div>
            </div>

            <!-- Lint Command -->
            <div class="command-card" data-category="development utility">
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #3f51b5, #2196f3);">L</div>
                    <div class="command-title">/lint</div>
                </div>
                <div class="command-description">
                    代码质量检查和格式化，支持多种语言和规则集。自动修复可修复的问题。
                </div>
                <div class="command-syntax">
                    /lint [--fix] [--format stylish|json|html] [--rules rules.yml] [files...]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">检查选项</div>
                    <div class="flag-item">
                        <span class="flag-name">--fix</span>
                        <span class="flag-description">自动修复可修复的问题</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--format</span>
                        <span class="flag-description">输出格式：stylish, json, html</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--rules</span>
                        <span class="flag-description">自定义规则配置文件</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/lint --fix "src/**/*.js"</div>
                    <div class="example">/lint --format json --rules .eslintrc.yml</div>
                    <div class="example">/lint --fix --format html --output lint-report.html</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">代码规范</span>
                    <span class="persona-tag">质量检查</span>
                </div>
            </div>

            <!-- Analyze Command -->
            <div class="command-card" data-category="analysis mcp">
                <div class="mcp-indicator">MCP集成</div>
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #009688, #4caf50);">A</div>
                    <div class="command-title">/analyze</div>
                </div>
                <div class="command-description">
                    深度代码和项目分析，包括复杂度、依赖关系、性能瓶颈和潜在问题。
                </div>
                <div class="command-syntax">
                    /analyze [--type complexity|security|performance|dependencies] [--output json|html] [--threshold 10]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">分析类型</div>
                    <div class="flag-item">
                        <span class="flag-name">--type</span>
                        <span class="flag-description">分析类型：complexity, security, performance, dependencies</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--threshold</span>
                        <span class="flag-description">复杂度阈值</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--output</span>
                        <span class="flag-description">输出格式：json, html, markdown</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/analyze --type complexity --threshold 15</div>
                    <div class="example">/analyze --type security --output html</div>
                    <div class="example">/analyze --type performance --dependencies</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">架构师</span>
                    <span class="persona-tag">安全专家</span>
                    <span class="persona-tag">性能工程师</span>
                </div>
            </div>

            <!-- Generate Command -->
            <div class="command-card" data-category="development utility mcp">
                <div class="mcp-indicator">MCP集成</div>
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #9c27b0, #673ab7);">G</div>
                    <div class="command-title">/generate</div>
                </div>
                <div class="command-description">
                    代码和文档自动生成，支持模板引擎和AI辅助生成。包括测试用例、API文档等。
                </div>
                <div class="command-syntax">
                    /generate [--type code|docs|tests|api] [--template template.yml] [--ai] [specification]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">生成选项</div>
                    <div class="flag-item">
                        <span class="flag-name">--type</span>
                        <span class="flag-description">生成类型：code, docs, tests, api</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--template</span>
                        <span class="flag-description">使用指定模板</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--ai</span>
                        <span class="flag-description">启用AI辅助生成</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/generate --type docs --ai "REST API for user management"</div>
                    <div class="example">/generate --type tests --template jest "src/utils.js"</div>
                    <div class="example">/generate --type code --ai "React component for data table"</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">AI助手</span>
                    <span class="persona-tag">模板引擎</span>
                </div>
            </div>

            <!-- Monitor Command -->
            <div class="command-card" data-category="utility mcp">
                <div class="mcp-indicator">MCP集成</div>
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #607d8b, #455a64);">M</div>
                    <div class="command-title">/monitor</div>
                </div>
                <div class="command-description">
                    系统和应用性能监控，实时收集指标并生成报告。支持告警和趋势分析。
                </div>
                <div class="command-syntax">
                    /monitor [--type system|app|network] [--interval 5s] [--alert] [--export csv|json]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">监控选项</div>
                    <div class="flag-item">
                        <span class="flag-name">--type</span>
                        <span class="flag-description">监控类型：system, application, network</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--interval</span>
                        <span class="flag-description">监控间隔时间</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--alert</span>
                        <span class="flag-description">启用告警通知</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/monitor --type system --interval 10s --alert</div>
                    <div class="example">/monitor --type app --export json --duration 1h</div>
                    <div class="example">/monitor --type network --real-time</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">运维监控</span>
                    <span class="persona-tag">系统管理员</span>
                </div>
            </div>

            <!-- Optimize Command -->
            <div class="command-card" data-category="analysis development">
                <div class="command-header">
                    <div class="command-icon" style="background: linear-gradient(135deg, #795548, #8d6e63);">O</div>
                    <div class="command-title">/optimize</div>
                </div>
                <div class="command-description">
                    性能优化建议和实施，包括代码优化、构建优化和运行时优化。
                </div>
                <div class="command-syntax">
                    /optimize [--type code|build|runtime|bundle] [--aggressive] [--profile] [target]
                </div>
                
                <div class="flags-section">
                    <div class="flags-title">优化选项</div>
                    <div class="flag-item">
                        <span class="flag-name">--type</span>
                        <span class="flag-description">优化类型：code, build, runtime, bundle</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--aggressive</span>
                        <span class="flag-description">激进优化模式</span>
                    </div>
                    <div class="flag-item">
                        <span class="flag-name">--profile</span>
                        <span class="flag-description">性能分析模式</span>
                    </div>
                </div>

                <button class="collapsible">使用示例</button>
                <div class="content">
                    <div class="example">/optimize --type bundle --profile</div>
                    <div class="example">/optimize --type code --aggressive src/</div>
                    <div class="example">/optimize --type build --runtime</div>
                </div>

                <div style="margin-top: 15px;">
                    <span class="persona-tag">性能工程师</span>
                    <span class="persona-tag">优化专家</span>
                </div>
            </div>
        </div>

        <div style="text-align: center; margin-top: 40px; color: white;">
            <p>💡 点击卡片中的"使用示例"查看更多详细信息</p>
            <p>使用搜索框或分类按钮快速找到所需命令</p>
        </div>
    </div>

    <script>
        // 搜索功能
        const searchInput = document.getElementById('searchInput');
        const commandCards = document.querySelectorAll('.command-card');
        const filterBtns = document.querySelectorAll('.filter-btn');

        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            commandCards.forEach(card => {
                const title = card.querySelector('.command-title').textContent.toLowerCase();
                const description = card.querySelector('.command-description').textContent.toLowerCase();
                const syntax = card.querySelector('.command-syntax').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || description.includes(searchTerm) || syntax.includes(searchTerm)) {
                    card.classList.remove('hidden');
                } else {
                    card.classList.add('hidden');
                }
            });
        });

        // 分类过滤
        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const category = this.dataset.category;
                
                // 更新活动按钮
                filterBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                
                // 过滤卡片
                commandCards.forEach(card => {
                    if (category === 'all' || card.dataset.category.includes(category)) {
                        card.classList.remove('hidden');
                    } else {
                        card.classList.add('hidden');
                    }
                });
            });
        });

        // 可折叠内容
        const collapsibles = document.querySelectorAll('.collapsible');
        collapsibles.forEach(collapsible => {
            collapsible.addEventListener('click', function() {
                this.classList.toggle('active');
                const content = this.nextElementSibling;
                if (content.style.maxHeight) {
                    content.style.maxHeight = null;
                } else {
                    content.style.maxHeight = content.scrollHeight + "px";
                }
            });
        });

        // 添加动画效果
        commandCards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
            card.style.animation = 'fadeInUp 0.6s ease forwards';
        });

        // CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>